<template>
  <div class="device-row">
    <div class="device-cell device-name">
      <div class="cell-content">
        <div class="cell-primary">
          {{ device.deviceName }}
          <el-tag v-if="device.isCurrent" effect="light" size="small" type="success">本机</el-tag>
        </div>
        <div class="cell-secondary">{{ device.os }}</div>
      </div>
    </div>

    <div class="device-cell device-method">
      <div class="cell-content">
        <div class="cell-primary">{{ device.loginMethod === "PASSWORD" ? "网页登录" : device.loginMethod }}</div>
        <div class="cell-secondary">{{ device.browser }}</div>
      </div>
    </div>

    <div class="device-cell device-location">
      <div class="cell-content">
        <div class="cell-primary">{{ device.location || "未知" }}</div>
        <div class="cell-secondary">IP {{ device.ipAddress }}</div>
      </div>
    </div>

    <div class="device-cell device-time">
      <div class="cell-content">
        <div class="cell-primary">{{ formatTime(device.lastLoginTime) }}</div>
      </div>
    </div>

    <div class="device-cell device-actions">
      <el-button
        v-if="!device.isCurrent"
        :loading="logoutLoading"
        plain
        size="small"
        type="primary"
        @click="$emit('logout', device)"
        >登出</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { formatRelativeTime } from "@/utils/format/date"

defineProps({
  device: {
    type: Object,
    required: true
  },
  logoutLoading: {
    type: Boolean,
    default: false
  }
})

defineEmits(["logout"])

const formatTime = time => {
  return formatRelativeTime(time)
}
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;

.device-row {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid $border-color-lighter;
  transition: background 0.2s ease;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: $bg-color-hover;
  }

  .device-cell {
    padding: 0 0.5rem;
    display: flex;
    align-items: center;

    &:first-child {
      padding-left: 0;
    }

    .cell-content {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .cell-primary {
      font-size: 0.875rem;
      color: $color-text-primary;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      line-height: 1.5;

      .el-tag {
        font-size: 0.7rem;
        padding: 0.05rem 0.3rem;
        font-weight: 500;
      }
    }

    .cell-secondary {
      font-size: 0.75rem;
      color: $color-text-secondary;
      line-height: 1.4;
    }
  }

  .device-name {
    flex: 0 0 30%;
    min-width: 200px;
  }

  .device-method {
    flex: 0 0 22%;
    min-width: 140px;
  }

  .device-location {
    flex: 0 0 22%;
    min-width: 140px;
  }

  .device-time {
    flex: 0 0 18%;
    min-width: 120px;
  }

  .device-actions {
    flex: 0 0 8%;
    min-width: 80px;
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .device-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;

    .device-cell {
      width: 100%;
      padding: 0;

      &.device-actions {
        justify-content: flex-start;
      }
    }
  }
}
</style>
